<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的小餐桌 - 共享厨房</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/lucide-static@latest/font/lucide.min.css" rel="stylesheet">
</head>
<body>
    <div class="device-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">9:41</div>
            <div class="status-bar-right">
                <span class="lucide-wifi"></span>
                <span class="lucide-battery"></span>
            </div>
        </div>
        
        <!-- 应用内容 -->
        <div class="app-container">
            <!-- 厨房信息 -->
            <div class="kitchen-header" style="position: relative; height: 180px; overflow: hidden; padding: 0;">
                <img src="https://images.unsplash.com/photo-1583394293214-28ded15ee548?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="厨房照片" style="width: 100%; height: 100%; object-fit: cover;">
                <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: white; padding: 20px;">
                    <h1 style="margin: 0; font-size: 24px;">小厨娘的家常菜</h1>
                    <p style="margin: 5px 0 0;">分享了32道菜谱 · 获赞328 · 被收藏165次</p>
                </div>
            </div>
            
            <!-- 用户信息 -->
            <div style="display: flex; align-items: center; padding: 15px; background-color: white; border-bottom: 1px solid #eee;">
                <img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="用户头像" style="width: 50px; height: 50px; border-radius: 25px; margin-right: 15px;">
                <div style="flex: 1;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div style="font-weight: 600; font-size: 18px;">小厨娘</div>
                        <button class="button" style="font-size: 14px; padding: 6px 12px;">
                            <span class="lucide-plus" style="margin-right: 5px;"></span>关注
                        </button>
                    </div>
                    <div style="color: #777; font-size: 14px; margin-top: 3px;">擅长家常菜，川菜</div>
                </div>
            </div>
            
            <!-- 厨房介绍 -->
            <div class="card">
                <div style="font-weight: 600; margin-bottom: 10px;">厨房介绍</div>
                <p style="color: #666; margin-bottom: 0;">
                    欢迎来到我的小厨房！我是一个热爱烹饪的普通家庭主妇，喜欢研究各种美食，尤其擅长家常菜和川菜。
                    在这里分享的都是经过反复测试、简单易学的家常菜谱，希望能帮助更多人做出美味可口的家常菜！
                </p>
            </div>
            
            <!-- 菜品分类标签 -->
            <div class="category-pills" style="margin-top: 10px;">
                <div class="category-pill active">全部菜品</div>
                <div class="category-pill">川菜</div>
                <div class="category-pill">家常菜</div>
                <div class="category-pill">快手菜</div>
                <div class="category-pill">荤菜</div>
                <div class="category-pill">素菜</div>
            </div>
            
            <!-- 菜品列表标题 -->
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 0 15px; margin-top: 15px;">
                <div class="section-title" style="margin: 0;">热门菜品</div>
                <div style="display: flex; align-items: center;">
                    <span style="color: #777; margin-right: 10px;">排序</span>
                    <span class="lucide-chevron-down" style="font-size: 16px;"></span>
                </div>
            </div>
            
            <!-- 菜品列表 -->
            <div class="dish-container">
                <!-- 菜品1 -->
                <div class="card dish-card" onclick="window.location.href='dish-detail-shared.html'">
                    <img src="https://images.unsplash.com/photo-1512058454905-6b841e7ad132?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="红烧排骨" class="dish-image">
                    <div class="dish-info">
                        <div class="dish-title">红烧排骨</div>
                        <div class="dish-description">肉质鲜嫩，口感酥烂</div>
                        <div style="display: flex; align-items: center; font-size: 12px; color: #777;">
                            <span class="lucide-heart" style="color: #E91E63; margin-right: 3px;"></span>
                            <span style="margin-right: 10px;">245</span>
                            <span class="lucide-bookmark" style="margin-right: 3px;"></span>
                            <span>78</span>
                        </div>
                    </div>
                    <div class="dish-actions">
                        <span class="lucide-bookmark"></span>
                        <span class="lucide-share-2"></span>
                    </div>
                </div>
                
                <!-- 菜品2 -->
                <div class="card dish-card" onclick="window.location.href='dish-detail-shared.html'">
                    <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="番茄炒蛋" class="dish-image">
                    <div class="dish-info">
                        <div class="dish-title">番茄炒蛋</div>
                        <div class="dish-description">家常菜，酸甜可口</div>
                        <div style="display: flex; align-items: center; font-size: 12px; color: #777;">
                            <span class="lucide-heart" style="color: #E91E63; margin-right: 3px;"></span>
                            <span style="margin-right: 10px;">189</span>
                            <span class="lucide-bookmark" style="margin-right: 3px;"></span>
                            <span>56</span>
                        </div>
                    </div>
                    <div class="dish-actions">
                        <span class="lucide-bookmark"></span>
                        <span class="lucide-share-2"></span>
                    </div>
                </div>
                
                <!-- 菜品3 -->
                <div class="card dish-card" onclick="window.location.href='dish-detail-shared.html'">
                    <img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="清蒸鱼" class="dish-image">
                    <div class="dish-info">
                        <div class="dish-title">清蒸鱼</div>
                        <div class="dish-description">鲜嫩可口，营养丰富</div>
                        <div style="display: flex; align-items: center; font-size: 12px; color: #777;">
                            <span class="lucide-heart" style="color: #E91E63; margin-right: 3px;"></span>
                            <span style="margin-right: 10px;">156</span>
                            <span class="lucide-bookmark" style="margin-right: 3px;"></span>
                            <span>42</span>
                        </div>
                    </div>
                    <div class="dish-actions">
                        <span class="lucide-bookmark"></span>
                        <span class="lucide-share-2"></span>
                    </div>
                </div>
                
                <!-- 菜品4 -->
                <div class="card dish-card" onclick="window.location.href='dish-detail-shared.html'">
                    <img src="https://images.unsplash.com/photo-1555126634-323283e090fa?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="麻婆豆腐" class="dish-image">
                    <div class="dish-info">
                        <div class="dish-title">麻婆豆腐</div>
                        <div class="dish-description">麻辣鲜香，下饭神器</div>
                        <div style="display: flex; align-items: center; font-size: 12px; color: #777;">
                            <span class="lucide-heart" style="color: #E91E63; margin-right: 3px;"></span>
                            <span style="margin-right: 10px;">132</span>
                            <span class="lucide-bookmark" style="margin-right: 3px;"></span>
                            <span>39</span>
                        </div>
                    </div>
                    <div class="dish-actions">
                        <span class="lucide-bookmark"></span>
                        <span class="lucide-share-2"></span>
                    </div>
                </div>
            </div>
            
            <!-- 最新菜品标题 -->
            <div class="section-title">最新分享</div>
            
            <!-- 最新菜品列表 -->
            <div class="dish-container">
                <!-- 最新菜品1 -->
                <div class="card dish-card" onclick="window.location.href='dish-detail-shared.html'">
                    <img src="https://images.unsplash.com/photo-1534939561126-855b8675edd7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="糖醋里脊" class="dish-image">
                    <div class="dish-info">
                        <div class="dish-title">糖醋里脊</div>
                        <div class="dish-description">外酥里嫩，酸甜开胃</div>
                        <div style="display: flex; align-items: center; font-size: 12px; color: #777;">
                            <span class="lucide-heart" style="color: #E91E63; margin-right: 3px;"></span>
                            <span style="margin-right: 10px;">87</span>
                            <span class="lucide-bookmark" style="margin-right: 3px;"></span>
                            <span>21</span>
                        </div>
                    </div>
                    <div class="dish-actions">
                        <span class="lucide-bookmark"></span>
                        <span class="lucide-share-2"></span>
                    </div>
                </div>
                
                <!-- 最新菜品2 -->
                <div class="card dish-card" onclick="window.location.href='dish-detail-shared.html'">
                    <img src="https://images.unsplash.com/photo-1519708227418-c8fd9a32b7a2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="香辣虾" class="dish-image">
                    <div class="dish-info">
                        <div class="dish-title">香辣虾</div>
                        <div class="dish-description">鲜香麻辣，回味无穷</div>
                        <div style="display: flex; align-items: center; font-size: 12px; color: #777;">
                            <span class="lucide-heart" style="color: #E91E63; margin-right: 3px;"></span>
                            <span style="margin-right: 10px;">65</span>
                            <span class="lucide-bookmark" style="margin-right: 3px;"></span>
                            <span>18</span>
                        </div>
                    </div>
                    <div class="dish-actions">
                        <span class="lucide-bookmark"></span>
                        <span class="lucide-share-2"></span>
                    </div>
                </div>
            </div>
            
            <!-- 查看更多 -->
            <div style="text-align: center; margin: 20px 0;">
                <button class="button ghost" style="width: 90%;">查看更多菜品</button>
            </div>
        </div>
        
        <!-- 返回按钮 -->
        <div style="position: absolute; top: 44px; left: 15px; z-index: 100;">
            <a href="discover.html" style="width: 36px; height: 36px; background-color: rgba(255,255,255,0.8); border-radius: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                <span class="lucide-arrow-left"></span>
            </a>
        </div>
    </div>
</body>
</html> 